<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的收藏</span>
      </div>
    </div>
    <!-- 主体区 -->
    <div class="body-box">
      <div class="body-top">
        <div class="topMeUn">
          <div :class="Select == '1' ? 'meu-n' : ''" @click="handelClick(1)">
            职位收藏
          </div>
          <div :class="Select == '2' ? 'meu-n' : ''" @click="handelClick(2)">
            公司收藏
          </div>
        </div>
        <div class="placeholder"></div>
      </div>
      <div v-if="Select == '1'" class="body-cen">
        <JobColl :listArr="listArr"></JobColl>
      </div>
      <div v-if="Select == '2'" class="body-cen">
        <CorCol :listArr1="listArr1"></CorCol>
      </div>
      <div class="paging">
        <div class="paging-body">
          <paging :pagingObj="pagingObj" @pageVal="pageVal"></paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JobColl from "./components/JobColl.vue";
import CorCol from "./components/CorCol.vue";
import paging from "../../../../components/paging.vue";
export default {
  data() {
    return {
      Select: "1", // 选中状态
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
      listArr1: [
        {
          name: "大数据运维工程师",
          corName: "人工智能",
          details: "河南省南阳市宛城区",
          id: "1",
        },
      ],
      listArr: [
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "1",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
        {
          name: "大数据运维工程师",
          money: "11-12k",
          corName: "微软科技有限公司",
          details: "河南省南阳市宛城区",
          id: "2",
        },
      ],
    };
  },
  components: {
    JobColl,
    paging,
    // CorColl,
    CorCol,
  },
  methods: {
    pageVal(val) {
      console.log("2222", val);
      this.pagingObj.currentPage = val;
    },
    // 切换
    handelClick(num) {
      this.Select = num;
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 17px;
      font-weight: 600;
    }
  }
  .details-title {
    font-size: 17px;
    font-weight: 600;
    margin-top: 10px;
  }
  .body-box {
    width: 88%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    .body-cen::-webkit-scrollbar {
      display: none;
    }
    // 头部切换公司收藏/职位收藏
    .body-top {
      width: 100%;
      height: 50px;
      display: flex;
      font-size: 16px;
      font-weight: 400;
      // margin-top: 10px;
      // margin-bottom: 10px;
      .topMeUn {
        width: 35%;
        display: flex;
        div {
          width: 100px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
        .meu-n {
          color: #3894ff;
        }
      }
      .placeholder {
        width: 50%;
      }
    }
    // 主体
    .body-cen {
      width: 100%;
      min-height: 550px;
      max-height: 550px;
      overflow: hidden;
      overflow-y: scroll;
    }
    // 底部div放分页
    .paging {
      width: 93%;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      height: 30px;
      display: flex;
      .paging-body {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: flex-end;
        margin: auto;
      }
    }
  }
}
</style>
